import { useEffect, useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

//初始化列表数据 列表
const getItems = (count) =>
  Array.from({ length: count }, (v, k) => k).map((k) => ({
    id: `item-${k + 1}`,
    content: `this is content ${k + 1}`,
  }));
const getItems2 = (count) =>
Array.from({ length: count }, (v, k) => k).map((k) => ({
  id: `item2-${k + 1}`,
  content: `右边item ${k + 1}`,
}));

// const getBigItem = (leftCount,rightCount) => {
//   return {leftList:getItems(leftCount),rightList:getItems2(rightCount)}
// }

const getBigItem = (leftCount,rightCount) => {
  return [{List:getItems(leftCount),key:1},{List:getItems2(rightCount),key:2}]
}

// 元素移动
const move = (arr, startIndex, toIndex) => {
  // console.log('arr2 -----> ', arr);
  arr = arr.slice();
  arr.splice(toIndex, 0, arr.splice(startIndex, 1)[0]);
  console.log('arr123 -----> ', arr);
  return arr;
};

// 设置样式
const getItemStyle = (isDragging, draggableStyle) => ({
  userSelect: 'none',
  padding: grid * 2,
  margin: `0 0 ${grid}px 0`,
  // 拖拽的时候背景变化
  background: isDragging ? 'lightgreen' : '#ffffff',
  // styles we need to apply on draggables
  ...draggableStyle,
});

const grid = 8;

// 样式2
const getListStyle = (isDraggingOver) => {
  return {
    background: isDraggingOver ? 'darkgreen' : 'gray',
    padding: grid,
    width: 250,
  };
};

const Dnd =() => {
  const [items, setItems] = useState(JSON.parse(localStorage.getItem("bigItems"))||getBigItem(5,5));
  const [items1, setItems1] = useState(items?.leftList);
  const [items2, setItems2] = useState(items?.rightList);

// const 

const onBigDragEnd = (result) => {
  if (!result.destination) {
    return;
  }
  console.log('result -----> ', result);
  setItems((pre) =>move(pre, result.source.index, result.destination.index));//数组 开始index 结束index
  // setItems((pre) => pre.leftList=move(pre.leftList, result.source.index, result.destination.index));//数组 开始index 结束index
};

  const onDragEnd1 = (result,key) => {
    console.log('result -----> ', result);
    // console.log('key -----> ', key);
    if (!result.destination) {
      return;
    }
    if(result.destination.droppableId="deoppable1"){
      setItems1((pre) =>move(items[0].List, result.source.index, result.destination.index));//数组 开始index 结束index
    console.log('1 -----> ', 1);
    }
    if(result.destination.droppableId="deoppable2"){
      setItems2((pre) =>move(items[1].List, result.source.index, result.destination.index));//数组 开始index 结束index
   console.log('2 -----> ', 2);
    }
    setItems([{List:items1,key:1},{List:items2,key:2}])
   
    console.log('items -----> ', items);
    // setItems((pre) => pre.leftList=move(pre.leftList, result.source.index, result.destination.index));//数组 开始index 结束index
  };
  // 右侧拖动结束
  const onDragEnd2 = (result) => {
    if (!result.destination) {
      return;
    }
    setItems2((pre) =>move(pre, result.source.index, result.destination.index));//数组 开始index 结束index

    // setItems((pre) => move(pre.rightList, result.source.index, result.destination.index));//数组 开始index 结束index
  };


  return (
    <DragDropContext  onDragEnd={onBigDragEnd} style={{"display":"flex"}}>
      {items?.map((v,i) => (
        <Droppable style={{"display":"inline-block"}} droppableId="Droppable1">
        {(provided, snapshot) => {
          return (
            <div
          {...provided.droppableProps}
          ref={provided.innerRef}
          >
              <Draggable key={v.key} draggableId={v.key} index={i}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style,
                      )}
                    >
                      {/* 小拖 */}
    <DragDropContext style={{"display":"inline-block"}} onDragEnd={onDragEnd1}>
                  {/* <DragDropContext style={{"display":"inline-block"}} onDragEnd={onDragEnd1(v.key)}> */}
    <div style={{"marginRight":"40px"}}>
      <Droppable droppableId={"droppable"+(v.key)}>
        {(provided, snapshot) => {
          return (
            <div
              //provided.droppableProps应用的相同元素.
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
            <h1>左边</h1>
              {/* {items.leftList?.map((item, index) => ( */}
              {v.List?.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style,
                      )}
                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
              {/* {items} */}
            </div>
          );
        }}
      </Droppable>
    </div>
  </DragDropContext>
      
                    </div>
                  )}
                </Draggable>        
          </div>
      
          )
          
      }}
      </Droppable>
 
      ))
      }
    
    {/* <Droppable style={{"display":"inline-block"}} droppableId="Droppable2">
      {(provided, snapshot) => {
        return (
          <div
          {...provided.droppableProps}
          ref={provided.innerRef}
          >
            <Draggable key="big2" draggableId="big2" index="big2">
                    {(provided, snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style,
                        )}
                      >

<DragDropContext style={{"display":"inline-block"}} onDragEnd={onDragEnd2}>
    <div>
    <Droppable droppableId="droppable2">
    {(provided, snapshot) => {
          return (
            <div
              //provided.droppableProps应用的相同元素.
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
            <h1>右边</h1>
              {items2?.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style,
                      )}
                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          );
        }}
    </Droppable>
    </div>
  </DragDropContext>
       
                        </div>
                    )}
                        </Draggable>


          </div>
    
        )
       
      }}
      </Droppable> */}
    </DragDropContext>
   

    // <DragDropContext></DragDropContext>

  );

//   return (
//     <DragDropContext  onDragEnd={onBigDragEnd} style={{"display":"flex"}}>
//     <Droppable style={{"display":"inline-block"}} droppableId="Droppable1">
//           {(provided, snapshot) => {
//             return (
//               <div
//             {...provided.droppableProps}
//             ref={provided.innerRef}
//             >
//                 <Draggable key="big1" draggableId="big1" index="big1">
//                     {(provided, snapshot) => (
//                       <div
//                         ref={provided.innerRef}
//                         {...provided.draggableProps}
//                         {...provided.dragHandleProps}
//                         style={getItemStyle(
//                           snapshot.isDragging,
//                           provided.draggableProps.style,
//                         )}
//                       >
//                        <DragDropContext style={{"display":"inline-block"}} onDragEnd={onDragEnd1}>
//       <div style={{"marginRight":"40px"}}>
//         <Droppable droppableId="droppable1">
//           {(provided, snapshot) => {
//             return (
//               <div
//                 //provided.droppableProps应用的相同元素.
//                 {...provided.droppableProps}
//                 ref={provided.innerRef}
//                 style={getListStyle(snapshot.isDraggingOver)}
//               >
//               <h1>左边</h1>
//                 {/* {items.leftList?.map((item, index) => ( */}
//                 {items1.map((item, index) => (
//                   <Draggable key={item.id} draggableId={item.id} index={index}>
//                     {(provided, snapshot) => (
//                       <div
//                         ref={provided.innerRef}
//                         {...provided.draggableProps}
//                         {...provided.dragHandleProps}
//                         style={getItemStyle(
//                           snapshot.isDragging,
//                           provided.draggableProps.style,
//                         )}
//                       >
//                         {item.content}
//                       </div>
//                     )}
//                   </Draggable>
//                 ))}
//                 {provided.placeholder}
//                 {/* {items} */}
//               </div>
//             );
//           }}
//         </Droppable>
//       </div>
//     </DragDropContext>
        
//                       </div>
//                     )}
//                   </Draggable>        
//             </div>
        
//             )
            
//         }}
//         </Droppable>
   
//     <Droppable style={{"display":"inline-block"}} droppableId="Droppable2">
//       {(provided, snapshot) => {
//         return (
//           <div
//           {...provided.droppableProps}
//           ref={provided.innerRef}
//           >
//             <Draggable key="big2" draggableId="big2" index="big2">
//                     {(provided, snapshot) => (
//                       <div
//                         ref={provided.innerRef}
//                         {...provided.draggableProps}
//                         {...provided.dragHandleProps}
//                         style={getItemStyle(
//                           snapshot.isDragging,
//                           provided.draggableProps.style,
//                         )}
//                       >

// <DragDropContext style={{"display":"inline-block"}} onDragEnd={onDragEnd2}>
//     <div>
//     <Droppable droppableId="droppable2">
//     {(provided, snapshot) => {
//           return (
//             <div
//               //provided.droppableProps应用的相同元素.
//               {...provided.droppableProps}
//               ref={provided.innerRef}
//               style={getListStyle(snapshot.isDraggingOver)}
//             >
//             <h1>右边</h1>
//               {items2?.map((item, index) => (
//                 <Draggable key={item.id} draggableId={item.id} index={index}>
//                   {(provided, snapshot) => (
                    
//                     <div
//                       ref={provided.innerRef}
//                       {...provided.draggableProps}
//                       {...provided.dragHandleProps}
//                       style={getItemStyle(
//                         snapshot.isDragging,
//                         provided.draggableProps.style,
//                       )}
//                     >
//                       {item.content}
//                     </div>
//                   )}
//                 </Draggable>
//               ))}
//               {provided.placeholder}
//             </div>
//           );
//         }}
//     </Droppable>
//     </div>
//   </DragDropContext>
       
//                         </div>
//                     )}
//                         </Draggable>


//           </div>
    
//         )
       
//       }}
//       </Droppable>
//     </DragDropContext>
   

//     // <DragDropContext></DragDropContext>

//   );
};

export default Dnd;
